<script>
import Session from "./components/session.vue";
import store from "./store";
import history from "./components/history.vue";
import reply from "./components/reply.vue";

export default {
  name: "app",
  data() {
    return {
      // 客服状态
      statusSelected: "false",
      // 客服状态列表
	  status: [{ text: "忙碌", value: false }, { text: "空闲", value: true }],
	  // 右侧选项卡
	  rightType: [
		  {
			  type: '快捷回复',
			  view: 'reply'
		  },
		  {
			  type: '客户记录',
			  view: 'history'
		  }
	  ],
	  // 被选中右侧选项卡
	  currRightView:'reply',
	  //右侧样式
	  rightActive:0
    };
  },
  methods: {
    // 空闲状态
    changeIdle: function() {},
    // 所有在线用户
    getOnlineUsers: function() {
      this.$parent.getUsers();
		},
		// 右侧按钮
		changeRight: function(i,view){
			this.currRightView = view
			this.rightActive = i
		},
		closeChat: function(){this.$parent.closeChat()}
  },
  created() {
    store.commit("INIT_DATA", 9090);
  },
  computed: {
    online: function() {
      return store.state.online;
    },
    selectedChat: function() {
      let session = store.state.chatList.find(
        session => session.roomId === store.state.selectId
      );
      return session;
    }
  },
  // 	watch:{
  // 		// 监测客服状态变化
  // 		'statusSelected':function(val){
  // 			stompClient.send("/app/status",{} ,JSON.stringify({isIdle:val,type:"status"}));
  // 		}
  // 	},
  components: {
    Session,
	history,
	reply
  }
};
</script>
<template>
<div>
	<div id="head">
		<div class="logo">

		</div>
		<div class="title">
			<h2>考拉智能客服管理系统</h2>
		</div>
		<div class="status">
			<select v-model="statusSelected" >
				<option v-for="option in status" v-bind:value="option.value">{{option.text}}</option>
			</select>
			<p>{{online}}</p>
		</div>
		<div class="help">
			<input type="button" value="退出" @click="closeChat"/>
		</div>
	</div>
  	<div id="app">
			<div class="sidebar">
				<div class="sidestatus">
						<a @click="getOnlineUsers">GET</a>
						<router-link to="customer">客户列表</router-link>
						<router-link to="service">客服列表</router-link>
				</div>
				
				<div class="sideLists">
					<router-view class="view-one" name="coustomerlist"></router-view>
					<router-view class="view-two" name="ServiceList"></router-view>
				</div>
			</div>
			<div class="main">
				<router-view class="view-one" name="coustomerpanel"></router-view>
				<router-view class="view-one" name="coustomertext"></router-view>
				<router-view class="view-two" name="ServicePanel"></router-view>
				<router-view class="view-two" name="ServiceText"></router-view>
			</div>
			<div class="right">
				<ul>
					<li v-for="(r, index) in rightType" @click="changeRight(index,r.view)" :class="{rightActive:rightActive==index}">
						{{r.type}}</li>
				</ul>
				<component :is="currRightView"></component>
			</div>
		<div id="session">
			<session></session>
		</div>
	</div>
	</div>
</template>
<style scoped lang="less">
#head {
	background-color: #fff;
	height: 70px;
	width: 1060px;
	margin: 0 auto;
	border:1px solid black;
	
	.title{
		float: left;
		width: 300px;
		height: 70px;
	}
	.logo{
		float: left;
		width: 200px;
		height: 70px;
	}
	.status{
		float: left;
		width: 150px;
		height: 70px;
	}
}
#app {
  display: flex;
  margin: 0px auto;
  width: 1060px;
  height: 600px;
  background-color: #fff;
  .sidebar {
    width: 200px;
    background: #ffffff;
    .sidestatus {
      padding: 17px;
      p {
        background-color: #e7e7e7;
        width: 50px;
      }
    }
    .sideLists {
      height: 450px;
    }
  }
  .main {
    flex: 1;
    height: 600px;
    width: 659px;
    background: #e7e7e7;
  }
  .right {
    position: relative;
	width: 200px;

	ul li {
		padding: 10px 10px;
		float:left;
		list-style: none;
	}
	.rightActive {
		color: red;
		border-bottom: 1px solid red;
		}
  }
}
</style>
